<template>
  <div class="recruit"> 
  
      <div class="recruit-container">
  
        <div class="enter">
  
          <div class="enter-hd">
  
            <div>
              <h2>查看审核记录</h2>
              <div class="steps">
                <div class="steps-icon"><img
                    src=""
                    alt="">
                  查询
                </div>
                <div class="steps-arrow"><img
                    src=""
                    alt=""></div>
                <div class="steps-icon"><img
                    src="//shadow.elemecdn.com/faas/daili-recruit-gray/static/img/examine.19616be.png" alt="">
                  提交数据
                </div>
                <div class="steps-arrow"><img
                    src=""
                    alt=""></div>
                <div class="steps-icon"><img
                    src=""
                    alt="">
                  等待结果
                </div>
              </div>
            </div>
          </div>
  
          <!-- 注册列表 -->
          <div class="enter-register">
  
            <el-form :model="form"  ref="formRef" label-width="140px">
  
              <div style="width: 640px; margin: 0 auto;" v-show="step===1">
                <el-form-item label="联系人手机号" prop="loginName" :rules="[{ required: true, message: '该值不能为空', trigger: 'blur' },{validator:mobileValidator,trigger: 'change'}]">
                  <el-input v-model="form.loginName"></el-input>
                </el-form-item>
  
                <el-form-item>
                  <el-button type="primary" :disabled="loginDisabled" @click="btnNext">查询</el-button>
                </el-form-item>
  
              </div>
  
              <div v-show="step===2">
  
                <el-row>
                  <el-col :span="10">
  
                    <div class="block">
                      <el-timeline>
                        <el-timeline-item :timestamp="processName(item)" v-for=" item  in processList" :type="processStyle(item)" placement="top">
                          <el-card v-if="item.status=== '0'">
                            <p> </p>
                            <h4>{{item.description}}</h4>
                          </el-card>
  
                          <el-card v-else>
                            <p> 审核时间 {{item.createTime}}</p>
                            <h4>{{item.description}}</h4>
                          </el-card>
  
                        </el-timeline-item>
                      </el-timeline>
                    </div>
  
                  </el-col>
  
                  <el-col :span="14">
  
  
                    <el-form-item label="商家名称" prop="name" :rules="[{ required: true, message: '该值不能为空', trigger: 'blur' }]">
                      <el-input v-model="form.name" placeholder="商家名称" />
                    </el-form-item>
  
                    <el-form-item label="联系电话" prop="phone" :rules="[{ required: true, message: '该值不能为空', trigger: 'blur' }]">
                      <el-input v-model="form.phone" placeholder="联系电话" />
                    </el-form-item>
  
                    <el-form-item label="地图位置" prop="longitude" style="text-align:left;" v-if="form.status==='2'" :rules="[{ required: true, message: '该值不能为空', trigger: 'blur' }]">
                      <span>经度:{{form.longitude}} 纬度:{{form.latitude}}</span>
                      <el-button type="primary" @click="mapShow=true">选择位置</el-button>
                      
                      <baiduDisplay v-if="form && form.latitude" :itemData="form" style="width:100%;height: 450px;"></baiduDisplay>
  
  
                      <div style="display:none;">
                        <el-input v-model="form.longitude" />
                      </div>
                    </el-form-item>
  
  
                    <el-form-item label="地图位置"   style="text-align:left;" v-if="form.status!=='2'">
                      <span>经度:{{form.longitude}} 纬度:{{form.latitude}}</span>
                      
                      <baiduDisplay v-if="form && form.latitude" :itemData="form" style="width:100%;height: 450px;"></baiduDisplay>
                      
                    </el-form-item>
  
  
                    <el-form-item label="商家地址" prop="address" :rules="[{ required: true, message: '该值不能为空', trigger: 'blur' }]">
                      <el-input v-model="form.address" placeholder="商家地址" />
                    </el-form-item>
  
                    <el-form-item label="商家图片" prop="picture" v-if="form.status==='2'" :rules="[{ required: true, message: '该值不能为空', trigger: 'blur' }]">
                      <el-upload class="avatar-uploader" :action="imageUploadUrl" :show-file-list="false"
                        :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                        <img v-if="form.picture" width="350" :src="form.picture" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                      </el-upload>
  
                      <div style="display:none;">
                        <el-input v-model="form.picture" />
                      </div>
                    </el-form-item>
  
                    <el-form-item label="商家图片" prop="picture" v-if="form.status!=='2'">
                      <img v-if="form.picture" width="350" :src="form.picture" class="avatar">
                    </el-form-item>
  
                    <el-form-item v-if="form.status==='2'">
                      <el-button type="primary" @click="btnSave">提交信息</el-button>
                    </el-form-item>
  
                  </el-col>
                </el-row>
  
              </div>
  
              <div v-show="step===3">
                <el-result icon="success" title="申请信息已发送" subTitle="请耐心等待审核结果,会以短信通您.">
                </el-result>
              </div>
  
  
            </el-form>
  
          </div>
  
        </div>
  
      </div>
  
  
  
      <!-- 地图选择器-->
      <el-dialog title="位置选择器" v-model="mapShow" width="800px" append-to-body :close-on-click-modal="false">
        <baiduSearch   :itemData="form" v-on:myclick="localCallback"  style="height: 400px;"></baiduSearch>
      </el-dialog>
  
    </div>
</template>

<script setup>
  import { ref, watch} from 'vue'
  import {  Plus } from '@element-plus/icons-vue'
  import { ElMessage  } from 'element-plus'
  //定义国际化的语言的文件
  import { useI18n } from 'vue-i18n';
  const { t } = useI18n();
  
  import {isPhone} from '@/utils/index.js'
  import baiduSearch from '@/components/BaiduAddress/index.vue'
  import baiduDisplay from '@/components/BaiduAddress/display.vue'
  import {anonDictTypeApi} from '@/api/dictdata.js'
  import {processApi, reviewSubmitApi} from '@/api/merchandiser.js'
  
  const { proxy } = getCurrentInstance(); 
   
  // 加载审核状态 sys_audit_status
  const sys_audit_status =ref([]);
  
  //禁用查询按钮
  const loginDisabled=ref(true)
  
  // 当前步骤
  const step = ref(1)
  
  //审核历史记录列表
  const processList=ref([])
  
  
  //图片上传地址   
  const imageUploadUrl =ref(process.env.VUE_APP_BASE_API+'/front/upload/image')
  
  // 百度地图对话框显示
  const mapShow = ref(false)
  
  //自己的定义额外参数
  const data = reactive({
     form: {
          picture: undefined,
          address: undefined,
          latitude: undefined,
          longitude: undefined,
          loginName: undefined
        } 
  });
  
  ///自己的定义额外参数,用来使用的
  const { form} = toRefs(data);
  
  
  
  
  //图片上传验证
  function beforeAvatarUpload(file) {
        const isJPG = (file.type === 'image/jpeg' || file.type === 'image/png');
        const isLt2M = file.size / 1024 / 1024 < 2;
  
        if (!isJPG) {
           ElMessage.error('上传头像图片只能是 JPG、PNG 格式!');
        }
        if (!isLt2M) {
           ElMessage.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
  }
  
  
  function handleAvatarSuccess(res, file) {
    if(res.code===200){
       form.value.picture= res.data.image_url
    }else{
       ElMessage.error( res.msg);
    } 
   } 
   
   
   //百度地图位置选择
   function localCallback(value){
     mapShow.value=false 
     form.value.latitude= value.latitude
     form.value.longitude=value.longitude
     form.value.address=value.address
   
   }
   
   //  重新提交信息
   function btnSave(){
     proxy.$refs["formRef"].validate(valid => {
         if (valid) { 
           
           ElMessageBox.confirm(
              '确定要提交数据吗?',t('btn.confirm'),
              {
                confirmButtonText: t('btn.confirm'),
                cancelButtonText: t('btn.cancel'),
                type: 'danger',
              }
            )
            .then(() => {
               //确认
               reviewSubmitApi(form.value).then(resp=> {
                 ElMessage({
                     message: '提交数据成功，请耐心等状态审核结果',
                     type: 'success',
                   }) 
                   //把审核状态改为未审核
                  form.value.status='0'
               })
               
            })
            .catch(() => {
            })            
        }
     }) 
   }
   
   // 根据输入用户名查询审核记录和用户信息
   function btnNext(){
     processApi(form.value.loginName).then(resp=>{ 
       form.value= resp.data.merchandiser
       processList.value= resp.data.processList
       step.value++
     })
   }
    
    
    //审核状态对应的样式
   function processStyle(row) {
     console.log(row)
      const arr=sys_audit_status.value.filter(s=> s.value=== row.status);
      return  arr[0].elTagType
    } 
    
    // 审核状态对应的名称
    function processName(row) {
      console.log(row)
       if(row.status==='0'){
            return '待审核'
       }else{
          const arr=sys_audit_status.value.filter(s=> s.value=== row.status);
          return  arr[0].label
       }
     }
     
     
  //自定义表单验证 （实际情况来选项配置）
  function mobileValidator(rule, value, callback){
     
    if (value === '') {
      loginDisabled.value=true
      callback(new Error('手机号不能为空'));
    } else if (!isPhone(value)) {
      loginDisabled.value=true
      callback(new Error('手机号码格式不正确，只支持(13|14|15|17|18|19)开头的!'));
    } else {   
      loginDisabled.value=false
      callback(); 
    }
  }
  
  
  function init(){
    //审核状态数据查询
    anonDictTypeApi('sys_audit_status').then(resp=> {
      sys_audit_status.value= resp.data
    })
  }

  //执行  
  init()
  
</script>

<style scoped lang="scss">
  .recruit-header {
    background: #009bff;
    background: -webkit-gradient(linear, left top, right top, from(#00adff), to(#0082ff));
    background: linear-gradient(90deg, #00adff, #0082ff);
  }


  .recruit-container {
    width: 1024px;
    margin: 0 auto;
  }


  .enter {
    padding: 16px 16px 0;
    background: #fff;
    max-width: 940px;
    margin: 0 auto;
  }

  .recruit-container>div {
    min-height: calc(100vh - 200px);
  }

  .enter-hd {
    text-align: center;
  }

  .desc {
    text-align: left;
    background: #f5f7fa;
    border-radius: 6px;
    font-size: 13px;
    line-height: 22px;
    color: #909399;
    padding: 15px;
    margin-bottom: 32px;
  }

  .kw-breadcrumb-item,
  .kw-btn,
  .kw-checkbox .kw-checkbox-appearance,
  .kw-link,
  .kw-modal,
  .kw-pager li,
  .kw-pagination-size,
  .kw-pagination-total,
  .kw-radio .kw-radio-appearance,
  .kw-tooltip {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  .kw-btn {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    border: 1px solid transparent;
    cursor: pointer;
    outline: none;
    font-weight: 500;
    text-decoration: none;
    vertical-align: middle;
  }


  .kw-btn.btn-large {
    height: 40px;
    line-height: 38px;
    padding: 0 20px;
    border-radius: 4px;
    font-size: 14px;
  }

  .kw-btn.btn-text {
    color: #606266;
    background-color: transparent;
    padding: 0;
    border: none;
    position: relative;
    background: none;
  }

  .desc .kw-btn {
    color: #606266;
    height: 22px;
    line-height: 22px;
    vertical-align: baseline;
  }

  .enter-hd h2 {
    color: #303133;
    font-size: 18px;
    font-weight: 400;
  }

  .steps {
    padding: 30px 0 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    font-size: 14px;
    color: #606266;
    border-bottom: 1px solid #e4e7ed;
  }

  .steps-icon {
    width: 64px;
  }


  .steps-icon img {
    width: 100%;
    margin-bottom: 10px;
  }

  .steps-arrow {
    padding-top: 14px;
  }

  .enter-register {
    padding: 25px 0;
    text-align: center;
  }

  .apply-detail-item {
    padding: 12px 0;
  }

  .apply-detail-item:first-child {
    border-bottom: 1px solid #e4e7ed;
  }

  .apply-detail h2 {
    font-size: 16px;
    color: #303133;
    line-height: 16px;
    font-weight: 400;
    margin-bottom: 10px;
  }

  .apply-detail ul {
    padding: 0;
    list-style: none;
  }

  .apply-detail-item ul li {
    font-size: 14px;
    color: #606266;
    padding-left: 20px;
    line-height: 24px;
    position: relative;
  }

  .apply-detail-item ul li:after {
    position: absolute;
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #c0c4cc;
    left: 0;
    top: 9px;
  }

  .apply-detail-item {
    padding: 12px 0;
  }

  .apply-detail h2 {
    font-size: 16px;
    color: #303133;
    line-height: 16px;
    font-weight: 400;
    margin-bottom: 10px;
  }

  .enter-register {
    padding: 25px 0;
    text-align: center;
  }

  .enter-register .mix-input-btn {
    background: #fff;
    font-size: 12px;
    position: absolute;
    right: 2px;
    top: 10px;
    color: #303133;
    font-weight: 500;
    height: 20px;
    line-height: 20px;
    padding: 0 15px;
    border-left: 1px solid #dcdfe6;
    cursor: pointer;
  }

  .enter-register .mix-input-btn .el-link:after {
    border-color: transparent;
  }
</style>
